<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="show" class="dialog_index dialog_banner"
   :before-close="cancle">
    <el-form ref="bannerForm" v-loading="loading">
      <el-tabs type="card" v-model="activeName">
          <el-tab-pane :label="item.site" :name="item.site"   v-for="item  in formList" :key="item.id">
            <el-form-item label="一级标题：">
              <el-input  :placeholder="'一级标题('+item.site+')（非必填项)'" v-model="item.first_title"></el-input>
            </el-form-item>
             <el-form-item label="二级标题：">
              <el-input  :placeholder="'二级标题('+item.site+')（非必填项)'" v-model="item.second_title"></el-input>
            </el-form-item>
              <el-form-item label="按钮名称：">
              <el-input  :placeholder="'按钮名称('+item.site+')（非必填项)'" v-model="item.button_name"></el-input>
            </el-form-item>
              <el-form-item label="链接：">
              <el-input  :placeholder="'链接('+item.site+')（非必填项)'" v-model="item.link"></el-input>
            </el-form-item>
          </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search"  @click="submitForm">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  props: {
    show: Boolean,
    closeAddDialog:Function,
  },
  data() {
    return {
      formList: [],
      loading: false,
      activeName: '',
    }
  },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        let cur_item = this.$parent.moduleData[this.$parent.cur_index]
        this.formList= JSON.parse(JSON.stringify( cur_item.data))
        this.activeName = cur_item.data[0].site
        this.loading = false
      }
    },
    
  },
  methods:{
    submitForm(){
      let status = this.validateForm()
      if(status){
       this.$emit('closeDialog', this.formList)
      }
    },
    validateForm () {
      let list = this.formList
      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].first_title.length > 200) {
          this.$message.error('站点' + list[i].site + '一级标题最多200字符')
          status = false
          break
        }
        if (list[i].second_title.length > 500) {
          this.$message.error('站点' + list[i].site + '二级标题最多500字符')
          status = false
          break
        }
         if (list[i].button_name.length > 50) {
          this.$message.error('站点' + list[i].site + '按钮名称最多50字符')
          status = false
          break
        }
         if (list[i].link.length > 200) {
          this.$message.error('站点' + list[i].site + '链接最多200字符')
          status = false
          break
        }
      }
      return status
    },
    cancle(){
      this.$emit('closeDialog')
      this.formList = []
    },
  }
}
</script>

<style lang="scss">

</style>